<template lang='pug'>
.adsSelect
  .sl-content
    .header
      .tit
        | 请选择
        a(href="javascript:;",@click="close").close
      nav
        a(href="javascript:;",v-for="(item,index) in anav",:class="[index == navSelect?'active':'',index > usefulBtnDeep?'unuseful':'']",@click="choiceNav(item,index)") {{item.levelName}}
    .list
      ul
        li(v-for="(item,index) in nowList",@click="choice(item,index)",:class="[choiceIndex[navSelect] == index?'active':'']") {{item.value}}
</template>
<script>
import fetch from '@/config/fetch'
import { snxd } from '@/config/env'
export default {
  data () {
    return {
      SelectedAddress: [],
      navTitle: [],
      navSelect: 0, // nav选择
      usefulBtnDeep: 0,
      choiceIndex:[-1,-1,-1,-1],
      nowList:[],
      mostDeep:0
    }
  },
  created() {
    this.nowList = this.adata
  },
  methods: {
    close() {
       this.$emit('closeselectAds')
    },
    choiceNav(item,index) {
      if (index > this.usefulBtnDeep) {
        return
      }
      this.navSelect = index
      if (index == 0) {
        this.nowList = this.adata
      }else {
        this.nowList = this.SelectedAddress[index-1].levelDetailList
      }
    },
    choice (item,index) {
      // 判断是否重复点击
      if (index == this.choiceIndex[this.navSelect]) {
        return 
      }
      this.usefulBtnDeep = 0
      this.SelectedAddress = this.SelectedAddress.slice(0,this.navSelect)
      this.choiceIndex = this.choiceIndex.slice(0,this.navSelect)
      // 传入数组
      this.SelectedAddress.push(item);
      // 显示样式
      this.choiceIndex.push(index)
      // 判断有无后续
      if (parseInt(item.levelNum)< this.anav.length && item.levelDetailList.length >=1) {
        this.usefulBtnDeep = parseInt(item.levelNum)
      }else {
        this.usefulBtnDeep = parseInt(item.levelNum)-1
        this.pushAddress();
        return
      }
      // 改变 navList
      this.navSelect +=1;
      // 改变 nowList
      this.nowList = item.levelDetailList
    },
    pushAddress () {
      let arr = []
      let poiPathArr = []
      let houseNumber = ''
      this.SelectedAddress.forEach(function(item,index) {
        if (item.levelNum <5) {
          arr.push(item.value)
          poiPathArr.push(item.detailId)
        }else {
          houseNumber = item.value
        }
      }, this);
      let d = {
        pathName:arr.join(),
        // houseNumber: houseNumber,
        poiPath: poiPathArr.join(' ')
      }
      this.$store.commit('AssignDetailAddress',d);
      this.$emit('closeselectAds')
    }
  },
  props:['adata','anav'],
  computed: {
    nowList () {
      if (this.navSelect = 0) {
        return this.adata
      }
    }
  }
}
</script>
<style lang='scss' scoped>
@import '../tool.scss';
.adsSelect {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  top: 0;
  left: 0;
  z-index: 100;
  .sl-content {
    width: 100%;
    height: _(784);
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    .header {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: _(161);
      .tit {
        width: 100%;
        height: _(88);
        text-align: center;
        text-indent: 0;
        line-height: _(88);
        box-shadow: 0 1px 0 0 #f0f0f0;
        position: relative;
        .close {
          display: block;
          position: absolute;
          top: _(28);
          right: _(41);
          width: _(32);
          height: _(32);
          background-image: url('/static/images/close.png');
          background-size: 100% 100%;
        }
      }
      nav {
        width: 100%;
        height: _(73);
        line-height: _(73);
        display: flex;
        justify-content: space-around;
        a {
          display: inline-block;
          box-sizing: border-box;
          font-size: _(26);
          padding: 0 _(40);
          color: #333;
          text-indent: 0;
        }
        .active {
          color: #ff7c33;
          border-bottom: 1px solid #ff7c33;
        }
        .unuseful {
          color: #999;
        }
      }
    }
    .list {
      width: 100%;
      height: _(623);
      margin-top: _(161);
      overflow-y: scroll;
      ul {
        li {
          width: 100%;
          height: _(89);
          line-height: _(89);
          color: #333;
          font-size: _(26);
          text-indent: _(40);
        }
        .active {
          background-color: #f7f7f7;
        }
      }
    }
  }
}
</style>  